import React, { memo } from "react";
import BannerCarousel from "@/components/banner";
import ProductCollect from "@/components/productCollect";
import SlideMenu from "@/components/slideMenu";
import { Col, Row, Typography } from "antd";
import sider1 from "@/assets/img/sider_2019_12-09.png";
import sider2 from "@/assets/img/sider_2019_02-04-2.png";
import sider3 from "@/assets/img/sider_2019_02-04.png";
import { useSelector } from "@/store/hooks";
import { useTranslation } from "react-i18next";
const index = memo(() => {
  const { recommendList } = useSelector((state) => ({
    recommendList: state.recommendProducts.recommendList,
  }));
  const { t } = useTranslation();
  return (
    <>
      <Row>
        <Col span={4}>
          <SlideMenu></SlideMenu>
        </Col>
        <Col span={19} offset={1}>
          <div>
            <BannerCarousel></BannerCarousel>
          </div>
        </Col>
      </Row>
      <ProductCollect
        products={recommendList[0]}
        title={
          <Typography.Title level={3} type="warning">
            {t("home_page.hot_recommended")}
          </Typography.Title>
        }
        sideImage={sider1}
      />
      <ProductCollect
        products={recommendList[1]}
        title={
          <Typography.Title level={3} type="danger">
            {t("home_page.new_arrival")}
          </Typography.Title>
        }
        sideImage={sider2}
      />
      <ProductCollect
        products={recommendList[2]}
        title={
          <Typography.Title level={3} type="success">
            {t("home_page.domestic_travel")}
          </Typography.Title>
        }
        sideImage={sider3}
      />
    </>
  );
});

export default index;
